import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useTheme } from '@material-ui/core/styles';
import { useMediaQuery, Grid, Typography, colors } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';
import { CardCategoryLink } from 'components/organisms';
import { setTopicFollowings } from 'redux/actions/FollowActions'
import { useSelector, useDispatch } from 'react-redux'
import { callGetApi } from 'utils/networking';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';


const Categories = props => {
  const { data, className, ...rest } = props;
  const dispatch = useDispatch()

  const theme = useTheme();
  const isMd = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true,
  });

  const profileData = useSelector((state) => state.auth.profileData);

  useEffect(() => {
    getServerSideProps()
  }, [])

  const getServerSideProps = async () => {
    await loadFollowData();
  }

  const loadFollowData = async () => {
    if (!profileData || !profileData.id) {
      return;
    }

    callGetApi(`blog/user_topic_followings?user_id=${profileData.id}`, dispatch, (data) => {
      dispatch(setTopicFollowings(data));
    })
  }

  const getColor = (color) => {
    if (color == 'amber') {
      return colors.amber;
    } else if (color == 'blue') {
      return colors.blue;
    } else if (color == 'blueGrey') {
      return colors.blueGrey;
    } else if (color == 'brown') {
      return colors.brown;
    } else if (color == 'common') {
      return colors.common;
    } else if (color == 'cyan') {
      return colors.cyan;
    } else if (color == 'deepOrange') {
      return colors.deepOrange;
    } else if (color == 'deepPurple') {
      return colors.deepPurple;
    } else if (color == 'green') {
      return colors.green;
      // } else if (indigo == 'indigo') {
      //     return colors.indigo;
    } else if (color == 'lightBlue') {
      return colors.lightBlue;
    } else if (color == 'lightGreen') {
      return colors.lightGreen;
    } else if (color == 'lime') {
      return colors.lime;
    } else if (color == 'orange') {
      return colors.orange;
    } else if (color == 'pink') {
      return colors.pink;
    } else if (color == 'purple') {
      return colors.purple;
    } else if (color == 'red') {
      return colors.red;
    } else if (color == 'teal') {
      return colors.teal;
    } else if (color == 'yellow') {
      return colors.yellow;
    } else {
      return colors.grey;
    }
  }

  return (
    <div className={className} {...rest}>
      <SectionHeader
        title={
          <span>
            Choose Your {' '}
            <Typography color="secondary" variant="inherit" component="span">Topic</Typography>
          </span>
        }
        subtitle="Browse the available topics, choose your favourite one and share your mind."
        fadeUp
      />
      <Grid container spacing={isMd ? 4 : 2}>
        {data.map((item, index) => (
          <Grid
            key={index}
            item
            container
            alignItems="center"
            direction="column"
            xs={12}
            sm={6}
            md={3}
            data-aos="fade-up"
          >
            <CardCategoryLink
              variant="outlined"
              align={isMd ? 'left' : 'center'}
              liftUp
              categoryID={item.id}
              category={item}
              title={item.title}
              subtitle={item.sub_title}
              href="#"
              fontIconClass={item.icon}
              color={getColor(item.color)}
            />
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

Categories.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.array.isRequired,
};

export default Categories;
